<template>
    <Row>
        <Col span="24">
            <Card :dis-hover="false">
                <BaseTable ck op pager front :total="total" @add="addHandler" @delete="deleteHandler" @update="updateHandler" @refresh="getAll" :columns="columns" :data="dataAll"></BaseTable>
                <Modal v-model="editData" title="资源信息" :mask-closable="false" class="editm" @on-ok="asyncOK" @on-cancel="asyncCancel">
                    <Form ref="editForm" :model="formData" :label-width="80" position="left"  :rules="ruleValidate">
                        <FormItem label="区域" prop="Name">
                            <Input v-model.trim="formData.Name"></Input>
                        </FormItem>

                        <FormItem label="上级"  prop="Pid">
                            <Select v-model="formData.Pid" >
                                <Option :value="'0'">顶级</Option>
                                <Option v-for="item in dataAll" :key="item.Id" :value="item.Id">{{ item.Name }}</Option>
                            </Select>
                        </FormItem>
                        <FormItem label="编码">
                            <Input v-model.trim="formData.Code"></Input>
                        </FormItem>
                    </Form>
                </Modal>
            </Card>
        </Col>
    </Row>
</template>

<script>
    import { mapMutations, mapGetters, mapState } from 'vuex';
    import BaseTable from '@/components/table/table.vue';
    export default {
        name: "region",
        components: {
            BaseTable
        },
        data () {
            return {
                loading: false, // 数据刷新遮罩层
                columns: [
                    {
                        title: '名称',
                        key: 'Name',
                        sortable: true
                    },
                    {
                        title: '上级部门',
                        key: 'Pname'
                    },
                    {
                        title: '等级',
                        key: 'Tname'
                    },
                    {
                        title: '状态',
                        key: 'Sname',
                        sortable: true
                    }
                ], // 表格样式
                dataAll: [], // 表格数据来源
                total: 0,
                addFlag: true,
                formData: {},
                editData: false,
                ruleValidate: {
                    Name: [
                        {
                            required: true,
                            message: '名称不能为空',
                            trigger: 'blur'
                        }
                    ],
                    Pid: [
                        {
                            required: true,
                            message: '路径不能为空',
                            trigger: 'blur'
                        }
                    ],
                },
            }
        },
        computed: {

        },
        methods: {
            getAll () {
                this.$api.getAllRegion().then(rsp => {

                    this.dataAll = rsp.Data
                    this.total = this.dataAll.length
                }, err => {
                    if (err) {
                        this.$Message.error(err)
                    }
                })
            },
            addHandler () {
                this.addFlag = true;
                this.$refs['editForm'].resetFields();
                this.editData = true;
            },
            deleteHandler (params) {
                // DeleteResouce2s
                console.log(params.length);
                if (params.length === 0) {
                    this.$Message.warning('请选择一条数据操作！');
                } else if (params.length > 0) {
                    this.$Modal.confirm({
                        title: '操作确认',
                        content: '删除后可能会影响其它功能使用，确认删除选中的数据吗？',
                        onOk: () => {
                            this.$api.deleteRegion(params).then(res => {
                                this.$Message.info('删除成功！');
                                this.getAll();
                            });
                        }
                    });
                }
            },
            updateHandler (params) {
                // console.log(params);
                if (params.length !== 1) {
                    this.$Message.warning('请选择一条数据操作！');
                } else {
                    this.addFlag = false;
                    this.formData = params[0];
                    this.editData = true;
                }
            },
            asyncOK () {
                this.$refs['editForm'].validate(valid => {
                    if (valid) {
                        if (!this.addFlag) {
                            // this.$api.updateResource(this.formItem).then(res => {
                            this.$api.updateRegion(this.formData).then(res => {
                                if (!res.error) {
                                    this.getAll();
                                    this.$Message.success(res.message);
                                } else {
                                    this.$Message.error(res.message, 4);
                                }
                            });
                        } else if (this.addFlag) {
                            // this.$api.addResource(this.formItem).then(res => {
                            this.$api.addRegion(this.formData).then(res => {
                                if (!res.error) {
                                    this.getAll();
                                    this.$Message.success(res.message);
                                } else {
                                    this.$Message.error(res.message, 4);
                                }
                            });
                        }
                        setTimeout(() => {
                            this.editData = false;
                        }, 500);
                    } else {
                        this.$Message.error('表单验证失败!');
                    }
                });
            },
            asyncCancel () {
                this.getAll();
            }
        },
        mounted() {
            this.getAll()
        }
    }
</script>

<style scoped>

</style>